<script lang="ts" setup>
import { ref, watch } from "vue";
import { CalcTree } from "./calc-tree";
import { type TreeLike } from "@/models/tree-like";

const { random } = Math;
// const flat: TreeLike[] = [
//   { id: 1, name: "Node" },
//   { id: 2, pid: 1, name: "Node" },
//   { id: 12, pid: 2, name: "Node" },
//   { id: 13, pid: 2, name: "Node" },
//   { id: 14, pid: 2, name: "Node" },
//   { id: 15, pid: 2, name: "Node" },
//   { id: 3, pid: 1, name: "Node" },
//   { id: 4, pid: 1, name: "Node" },
//   { id: 5, pid: 3, name: "Node" },
//   { id: 6, pid: 3, name: "Node" },
//   { id: 7, pid: 4, name: "Node" },
//   { id: 8, pid: 7, name: "Node" },
//   { id: 9, pid: 5, name: "Node" },
//   { id: 10, pid: 5, name: "Node" },
//   { id: 11, pid: 10, name: "Node" },
// ];
// const flat = randomTree(4);
const props = withDefaults(defineProps<{ flat: TreeLike[] }>(), { flat: () => [] });
const pool = ref<TreeLike[][]>([]);

function init() {
  const instance = new CalcTree(props.flat);
  pool.value = instance.pools.values().next().value || [];
}

function rndColor() {
  return `rgba(${random() * 255},${random() * 255},${random() * 255},0.5)`;
}

watch(
  () => props.flat,
  () => init(),
  { immediate: true },
);
</script>

<template>
  <div class="tree">
    <div class="row" v-for="(row, i) in pool" :key="i">
      <div
        class="cell"
        v-for="(cel, j) in row"
        :class="cel.virtual ? 'virtual' : ''"
        :style="{ width: cel.length! * 100 + '%', backgroundColor: rndColor() }"
        :key="j"
      >
        <!-- <div>{{ cel.id || "-" }}</div> -->
        <div>{{ cel.name || "虚拟" }}</div>
        <div>len:{{ Math.round((cel.length || 0) * 10000) / 100 }}%</div>
        <div>{{ `x:${Math.round(100 * (cel.sequence || 0))}, y:${cel.depth}` }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tree {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .row {
    display: flex;
    flex: auto;

    .cell {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5px 0;
      font-size: smaller;

      &.virtual {
        opacity: 0.3;
      }
    }
  }
}
</style>
